<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>逆剑仙侠</title>
</head>
<link rel="stylesheet" href="css/swiper.min.css">
<link rel="stylesheet" href="css/index.css">
<body>
<!--顶部导航栏-->
<div  id="header">
    <div class="hearder">

        <img class="logo" src="images/logo.png" alt="">

        <ul class="nav">
            <li><a href="#con_1">官网首页</a></li>
            <li><a href="#con_2">职业介绍</a></li>
            <li><a href="#con_3">公司介绍</a></li>
        </ul>
    </div>

</div>
<!--内容区-->
<div class="container">
    <div id="con_1" class="banner_box">
        <img class="banner_img" src="images/banner.png" alt="">
        <a href="#con_2" class="banner_more"> <img class="banner_more_img" src="images/banner_more.png" alt=""></a>

        <div class="banner_left">
            <img class="banner_left_bg" src="images/banner_left_bg.png" alt="">
            <div class="banner_left_download">
                <a class="banner_left_top" href="https://dolls-production.oss-cn-hangzhou.aliyuncs.com/dolls/nijianxianxia-sha-180122-release.apk">
                    <img class="banner_left_android" src="images/android.png" alt="">
                    <span class="banner_left_text fz14">Android</span>
                    <span class="banner_left_text fz12">下载</span>
                </a>
                <a class="banner_left_top"  >
                    <img class="banner_left_ios" src="images/ios.png" alt="">
                    <!--<span class="banner_left_text fz14">敬请</span>-->
                    <span class="banner_left_txt fz12 ">敬请期待</span>
                </a>
            </div>

        </div>

    </div>
    <div id="con_2" class="swiper_box">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img src="images/vocation_1.png" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="images/vocation_2.png" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="images/vocation_3.png" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="images/vocation_4.png" alt="">
                </div>
            </div>
        </div>
        <ul class="swiperTab">
            <li>  <img class="tab_img" src="images/swiper_tab1.png" alt=""> <img class="tab_cur" src="images/swiper_tab1_cur.png" alt=""></li>
            <li>  <img class="tab_img" src="images/swiper_tab2.png" alt=""> <img class="tab_cur" src="images/swiper_tab2_cur.png" alt=""></li>
            <li>  <img class="tab_img" src="images/swiper_tab3.png" alt=""> <img class="tab_cur" src="images/swiper_tab3_cur.png" alt=""></li>
            <li>  <img class="tab_img" src="images/swiper_tab4.png" alt=""> <img class="tab_cur" src="images/swiper_tab4_cur.png" alt=""></li>

        </ul>
    </div>
    <div id="con_3" class="about_box">
        <img src="images/about_us.png" alt="">
    </div>

    <div class="menu_box">
        <div class="menu_top">top</div>
        <ul class="menu_list">
            <li><a href="#con_1"></a></li>
            <li><a href="#con_2"></a></li>
            <li><a href="#con_3"></a></li>
        </ul>
        <div class="menu_text">
            滚动鼠标<br>
            浏览
        </div>
    </div>

</div>
<!--底部-->
<!--<div id="footer">footer</div>-->
<script src="js/jquery.min.js"></script>
<script src="js/swiper.min.js"></script>
<script src="js/navScroll.js"></script>
<script src="js/swiperTab.js"></script>
<script>
    $(function() {
        // 获取重要节点
        var $header = $('#header'),
            $nav = $header.find('.nav'),
            $nava =$nav.find('li > a'),
            $navFocus = $nav.find('.nav_focus');
        navScroll($nav,$nava,$navFocus,'cur');

        var  $menu = $('.menu_list'),
             $menua =$menu.find('li a');
        navScroll($menu,$menua,$navFocus,'cur');


        /*banner 显示更多按钮动画特效*/
        var $more=$('.banner_more');
        $(document).on('scroll',function(){
            var	docTop = $(document).scrollTop(),
                offsetTop=$more.get(0).offsetTop;
            if( docTop>offsetTop){
                $more.removeClass('more_move')
            }else {
                $more.addClass('more_move')
            }
        });

        $more.click(function() {
            $("html, body").animate({
                /*根据a标签href转换为ID选择器 获取对应位置*/
                scrollTop: $($(this).attr("href")).offset().top - 60+"px"
            }, {
                duration: 500,
                easing: "swing"
            });
            return false;
        });
    })
</script>
<script>
    /*swiper选项卡切换*/
    $(function () {
//        $('.swiperTab > li').eq(0).addClass('active');
        tabs('.swiperTab > li','.swiper-container','active');
    });
</script>

</body>
</html>